<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用CDN方式引入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.4/vue.min.js"></script>
</head>
<body>
<h1>Vue的条件渲染v-show</h1>
<hr>
<!-- id标识vue作用的范围 -->
<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
 此时title中显示的是模型数据
-->
<div id="app">
    <!--可以使用单个复选框绑定到布尔值-->
    <input type="checkbox" v-model="accept">接受霸王条款
    <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
    <h1 v-show="accept">用户接受此条款</h1>
    <h1 v-show="!accept">用户不接受此条款</h1>
</div>

<script>
    // 创建一个vue对象
    let vm = new Vue({
        el: '#app',//绑定vue作用的范围,el是element的简写。
        data: {//定义页面中显示的模型数据或者说为属性
            accept: false
        }
    })
</script>

</body>
</html>
